<template>
  <div>
    <div ref="bar" class="view">
    </div>
  </div>
</template>
<script>
export default {
  name: '',
  components: {

  },
  props: {
    typeData: {
      type: Array,
      default: () => {
        return []
      }
    },
  },
  data () {
    return {
    }
  },
  created () {

  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      let bar = this.$echarts.init(this.$refs.bar);
      bar.setOption({

        color: ['#5470c6', '#91cc75'], // 颜色
        legend: { // 图例
          // top: '5%',
          orient: 'horizontal', // 朝向 vertical 竖直 horizontal 水平
          left: 'center',
          top: '5%'
          // data:['1','2','3','4','5'] // 标题
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: { // 直角坐标系内绘图网格
          tooltip: {
            axisPointer: {}
          },
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
          x: 200,
          y2: 200
        },
        xAxis: [
          {
            type: 'category',
            data: ['2019年', '2020年', '2021年'],
            axisTick: {
              alignWithLabel: true
            }
            // axisLabel: {
            // 	interval: 0, // 强制文字产生间隔
            // 	rotate: 45 // 文字逆时针旋转45°
            // }
          }
        ],
        yAxis: [
          {
            type: 'value',
            scale: true,
            name: '万元',
            min: 0,
            boundaryGap: [0.2, 0.2],
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#div_icona3a6'],
                width: 1,
                type: 'dashed'
                // solid 实线
              }
            }
          }
        ],
        series: [
          {
            name: '申请金额',
            type: 'bar',
            barWidth: '30%',
            // barGap: 0,
            // label: 1,
            // emphasis: {
            // 	focus: 'series'
            // },
            data: [12600, 16274.5774, 41510.0574]
          },
          {
            name: '审定金额',
            type: 'bar',
            barWidth: '30%',
            // label: 2,
            // emphasis: {
            // 	focus: 'series'
            // },
            data: [7236.81, 9073.0973, 28454.0384]
          }
        ]
      })
    },
  },
  computed: {

  },
}
</script>
<style lang='scss' scoped>
.view {
  width: 100%;
  height: 30rem;
}
</style>
